<template>
  <div class="job-container">
    <div class="filter-section">
      <el-card class="filter-card">
        <el-form :inline="true" :model="filterForm" class="filter-form">
          <el-form-item label="职位名称">
            <el-input v-model="filterForm.name" placeholder="请输入职位名称"></el-input>
          </el-form-item>
          <el-form-item label="工作地点">
            <el-select v-model="filterForm.address" placeholder="请选择" filterable clearable>
              <el-option label="全部" value=""></el-option>
              <el-option :label="item" :value="item" v-for="(item, index) in addressList" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作经验">
            <el-select v-model="filterForm.experience" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="应届生" value="应届生"></el-option>
              <el-option label="1-3年" value="1-3年"></el-option>
              <el-option label="3-5年" value="3-5年"></el-option>
              <el-option label="5年以上" value="5年以上"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学历要求">
            <el-select v-model="filterForm.education" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="大专" value="大专"></el-option>
              <el-option label="本科" value="本科"></el-option>
              <el-option label="硕士" value="硕士"></el-option>
              <el-option label="博士" value="博士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职位类型">
            <el-select v-model="filterForm.type" placeholder="请选择" filterable clearable>
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in jobTypeList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getJob">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 职位列表 -->
    <div class="job-list" v-loading="loading">
      <el-card v-for="job in jobList" :key="job.id" class="job-card" shadow="hover">
        <div class="job-header">
          <div class="job-title">
            <h3>{{ job.name }}</h3>
            <el-tag size="small" type="success">{{ job.salary }}</el-tag>
          </div>
          <div class="job-company">
            <img :src="job.companyAvatar" class="company-logo">
            <div class="company-info">
              <div class="company-name">{{ job.companyName }}</div>
            </div>
          </div>
        </div>
        <div class="job-footer">
          <div class="job-requirements">
            <span>{{ job.address }}</span>
            <span>{{ job.experience }}</span>
            <span>{{ job.education }}</span>
            <span>{{ job.type }}</span>
          </div>
          <div>
            <el-button size="small" @click="showJobDetail(job)">岗位详情</el-button>
            <el-button type="primary" size="small" @click="handleApply(job)">立即申请</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <el-dialog title="岗位详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="job-detail" v-if="currentJob">
        <div class="detail-header">
          <div class="detail-title">
            <h2>{{ currentJob.name }}</h2>
          </div>
          <div class="detail-company">
            <img :src="currentJob.companyAvatar" class="company-logo">
            <div class="company-info">
              <div class="company-name">{{ currentJob.companyName }}</div>
              <div class="company-desc">{{ currentJob.companyDesc }}</div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="detail-content">
          <div class="detail-section">
            <h3>职位要求</h3>
            <div class="requirement-list">
              <div class="requirement-item">
                <span class="label">工作地点：</span>
                <span class="value">{{ currentJob.address }}</span>
              </div>
              <div class="requirement-item">
                <span class="label">工作经验：</span>
                <span class="value">{{ currentJob.experience }}</span>
              </div>
              <div class="requirement-item">
                <span class="label">学历要求：</span>
                <span class="value">{{ currentJob.education }}</span>
              </div>
              <div class="requirement-item">
                <span class="label">岗位薪资：</span>
                <span class="value">{{ currentJob.salary }}元</span>
              </div>
            </div>
          </div>
          <div class="detail-section">
            <h3>职位描述/任职资格</h3>
            <div class="job-description" v-html="currentJob.introduce"></div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="filterForm.currPage" :page-sizes="[10, 20, 30, 50]" :page-size="filterForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getJobList, getDeliverSubmit, getJobTypeList } from '@/api'
import { MessageBox } from 'element-ui'

export default {
  name: 'Job',
  data() {
    return {
      loading: false,
      detailDialogVisible: false,
      currentJob: null,
      jobTypeList: [],
      filterForm: {
        name: '',
        address: '',
        experience: '',
        education: '',
        type: '',
        currPage: 1,
        pageSize: 10,
        category: "正式"
      },
      total: 0,
      jobList: [],
      addressList: [
        // 直辖市
        "北京", "上海", "天津", "重庆",
        // 广东省
        "广州", "深圳", "东莞", "佛山", "珠海", "中山", "惠州", "汕头", "江门", "湛江", "肇庆", "茂名",
        // 江苏省
        "南京", "苏州", "无锡", "常州", "南通", "徐州", "扬州", "盐城", "泰州", "镇江", "淮安", "连云港", "宿迁",
        // 浙江省
        "杭州", "宁波", "温州", "绍兴", "嘉兴", "金华", "台州", "湖州", "衢州", "丽水", "舟山",
        // 四川省
        "成都", "绵阳", "宜宾", "南充", "德阳", "泸州", "达州", "乐山", "眉山", "内江", "自贡", "攀枝花",
        // 湖北省
        "武汉", "宜昌", "襄阳", "荆州", "黄冈", "孝感", "十堰", "荆门", "鄂州", "咸宁", "随州",
        // 山东省
        "济南", "青岛", "烟台", "潍坊", "临沂", "淄博", "济宁", "泰安", "威海", "德州", "聊城", "菏泽", "日照", "枣庄",
        // 福建省
        "福州", "厦门", "泉州", "漳州", "莆田", "宁德", "三明", "南平", "龙岩",
        // 河南省
        "郑州", "洛阳", "南阳", "许昌", "周口", "新乡", "商丘", "驻马店", "信阳", "安阳", "开封", "平顶山",
        // 湖南省
        "长沙", "株洲", "湘潭", "衡阳", "岳阳", "常德", "邵阳", "郴州", "益阳", "永州", "怀化", "娄底", "张家界",
        // 其他省份重点城市
        // 河北省
        "石家庄", "保定", "唐山", "邯郸", "廊坊", "沧州", "邢台", "秦皇岛", "衡水", "张家口",
        // 陕西省
        "西安", "咸阳", "宝鸡", "渭南", "汉中", "榆林", "延安", "安康", "商洛",
        // 辽宁省
        "沈阳", "大连", "鞍山", "抚顺", "锦州", "营口", "盘锦", "丹东", "辽阳", "本溪",
        // 其他地区
        "合肥（安徽）", "芜湖（安徽）", "南昌（江西）", "赣州（江西）",
        "太原（山西）", "大同（山西）", "呼和浩特（内蒙古）", "包头（内蒙古）",
        "南宁（广西）", "柳州（广西）", "桂林（广西）", "海口（海南）", "三亚（海南）",
        "贵阳（贵州）", "遵义（贵州）", "昆明（云南）", "曲靖（云南）",
        "兰州（甘肃）", "天水（甘肃）", "银川（宁夏）", "西宁（青海）",
        "乌鲁木齐（新疆）", "克拉玛依（新疆）", "拉萨（西藏）",
        // 港澳台
        "香港", "澳门", "台北（台湾）", "高雄（台湾）", "台中（台湾）", "新北（台湾）"
      ]
    }
  },
  mounted() {
    this.getJob();
    this.getJobTypes();
  },
  methods: {
    getJob() {
      this.loading = true;
      getJobList(this.filterForm).then(res => {
        this.jobList = res.data.list;
        this.total = parseInt(res.data.total);
        this.loading = false;
      }).catch(err => {
        this.$message.error(err.msg);
        this.loading = false;
      })
    },
    getJobTypes() {
      getJobTypeList({
        category: this.filterForm.category
      }).then(res => {
        this.jobTypeList = res.data;
      }).catch(err => {
        this.$message.error('获取职位类型失败');
      });
    },
    handleSearch() {
      // 实现搜索逻辑
      console.log('搜索条件：', this.filterForm)
    },
    resetForm() {
      this.filterForm = {
        name: '',
        address: '',
        experience: '',
        education: '',
        type: '',
        currPage: 1,
        pageSize: 10,
        category: "正式"
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // 重新加载数据
    },
    showJobDetail(job) {
      this.currentJob = job;
      this.detailDialogVisible = true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    handleApply(job) {
      if (!localStorage.getItem('token')) {
        this.$message.warning('请先登录');
        return;
      }
      MessageBox.confirm('确认投递该职位吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        getDeliverSubmit({
          jobId: job.id
        }).then(res => {
          this.$message.success('投递成功');
          this.loading = false;
        }).catch(err => {
          this.$message.error(err.msg || '投递失败');
          this.loading = false;
        });
      }).catch(() => {
        this.$message.info('已取消投递');
      });
    }
  }
}
</script>

<style scoped>
.job-container {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.job-list {
  margin-bottom: 20px;
}

.job-card {
  margin-bottom: 20px;
  cursor: pointer;
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.job-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.job-title h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.job-company {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-logo {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.company-info {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-size: 14px;
  color: #333;
}

.company-desc {
  font-size: 12px;
  color: #666;
}

.job-tags {
  margin-bottom: 15px;
}

.job-tags .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-requirements {
  color: #666;
  font-size: 14px;
}

.job-requirements span {
  margin-right: 15px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.job-detail {
  padding: 20px;
}

.detail-header {
  margin-bottom: 20px;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.detail-title h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.detail-company {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.company-logo {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.company-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #409EFF;
}

.requirement-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.requirement-item {
  display: flex;
  align-items: center;
}

.requirement-item .label {
  color: #666;
  margin-right: 10px;
  min-width: 80px;
}

.requirement-item .value {
  color: #333;
}

.job-description,
.job-requirements {
  line-height: 1.8;
  color: #333;
}

.job-description p,
.job-requirements p {
  margin: 10px 0;
}
</style>